<template>
  <div>
    <!-- 显示历史记录 -->
    <el-card>
      <el-table style="width: 100%; margin-top: 50px" border :data="list">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="wares.waresName"
          label="商品名"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="prop"
          label="商品图片"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div class="block">
              <el-carousel
                height="80px"
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item
                  v-for="item in getpictureList(row.wares.waresPicture)"
                  :key="item"
                >
                  <img :src="item" alt="123" width="80px" height="80px" />
                </el-carousel-item>
              </el-carousel>
            </div> </template
        ></el-table-column>
        <el-table-column
          prop="waresNumber"
          label="商品数量"
          
        ></el-table-column>

        <el-table-column
          prop="discount"
          label="折扣率"
          
        ></el-table-column>
        
        <el-table-column
          prop="finishTimeEntry"
          label="活动报名结束时间"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="startTime"
          label="活动开始时间"
          width="200px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="finishTimeActivity"
          label="活动结束时间"
          width="200px"
          align="center"
        ></el-table-column>
        
        <el-table-column
          prop="flashActivityState"
          label="秒杀活动状态"
          width="150px"
          align="center"
        ></el-table-column>
        <el-table-column prop="prop" label="操作" width="250px">
          <template slot-scope="{ row }">
            <div v-if="antiFlashActivityState(row.flashActivityState)<5">
            <el-button
              type="primary"
              @click="changeFlashActivity(row.flashActivityId,antiFlashActivityState(row.flashActivityState)+1)"
              >推进状态</el-button
            >
            <!-- <el-button 
              type="danger"
              icon="el-icon-delete"
              @click="changeFlashActivity(row.flashActivityId,antiFlashActivityState(row.flashActivityState))"
              >--</el-button
            > -->
        </div>
        <div v-else>秒杀活动已结束</div>
        
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 20px; text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import store from '@/store';
import getters from '@/store/getters'
import getDefaultState from '@/store/modules/user'
export default {
  name: "FlashActivity",

  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      list: [],
      sellerId: "",
      form: "admin",
      DefaultState:getDefaultState.state,
      
    };
  },
  computed: {
    seid() {
      return this.$store.state.user.id
    },
    
  },
  
  mounted() {
    // console.log(getDefaultState);
    this.getFlashActivityList();
  },

  methods: {
    handleSizeChange(limit) {
      this.limit = limit;
      this.getFlashActivityList();
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getFlashActivityList();
    },
    
    //获取所有秒杀活动
    async getFlashActivityList() {
      this.sellerId=this.DefaultState.id
      const { page, limit , sellerId } = this;

      // console.log(page,limit,sellerId === 'admin');
      // console.log(this.DefaultState);
      let result = await this.$API.flashActivity.reqFlashActivityList(page ,limit , sellerId);
      
      // console.log(result);
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.flashActivityList;
        // console.log(this.list);
        for (let i of this.list) {
          i.flashActivityState = this.flashActivityState(i.flashActivityState);
          i.pictureList=i.wares.waresPicture.split(";");
        }
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //正确显示秒杀活动状态
    //未开始/报名开始/报名结束/活动开始/活动结束/已下架
    flashActivityState(flashActivityState) {
      if (flashActivityState == 0) {
        return "未开始";
      } else if (flashActivityState == 1) {
        return "报名开始";
      } else if (flashActivityState == 2) {
        return "报名结束";
      } else if (flashActivityState == 3) {
        return "活动开始";
      } else if (flashActivityState == 4) {
        return "活动结束";
      } else {
        return "已下架";
      }
    },

    //逆反秒杀活动状态
    antiFlashActivityState(flashActivityState) {
      if (flashActivityState === "未开始") {
        return 0;
      } else if (flashActivityState === "报名开始") {
        return 1;
      } else if (flashActivityState === "报名结束") {
        return 2;
      } else if (flashActivityState === "活动开始") {
        return 3;
      } else if (flashActivityState === "活动结束") {
        return 4;
      } else {
        return 5;
      }
    },
    //获取商品图片
    getpictureList(pictureList) {
      return pictureList.split(";");
    },
    //修改售后申请状态
    async changeFlashActivity(flashActivityId, flashActivityState) {
      let result = await this.$API.flashActivity.reqChangeFlashActivity(
        flashActivityId,
        flashActivityState
      );
      
      if (result.code == 200) {
        this.$message({
          message: result.data,
          type: "success",
        }
        );
        this.getFlashActivityList();
      } else {
        return Promise.reject(new Error("false"));
      }
    },
  },
};



</script>

<style lang="scss" scoped>
</style>
